<template>
  <div>
    <el-button type="primary" @click="addfn">新增</el-button>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="日期" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.date }}</span>
        </template>
      </el-table-column>
      <el-table-column label="姓名" width="180">
        <template slot-scope="scope">
          <el-popover placement="top">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.name }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="住址" width="220">
        <template slot-scope="scope">
          <el-popover placement="top">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.address }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <!-- <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          > -->
          <el-popover placement="right" width="160" v-model= "scope.row.visible"  trigger="click" :ref="`node-popover-${scope.row.appversionId}`"> 
            <p>这是一段内容这是一段内容确定删除吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="scope.row.visible = false"
                >取消</el-button
              >
              <el-button type="primary" size="mini" @click="fn(scope.$index)"
                >确定</el-button
              >
            </div>
            <el-button slot="reference"  size="mini">删除</el-button>
          </el-popover>
        </template>
      </el-table-column>

      <!-- 弹窗表单 -->
    </el-table>
    <el-dialog
      :title="isedit"
      :visible="dialogFormVisible"
      :append-to-body="true"
    >
      <el-form :model="form">
        <el-form-item label="日期" :label-width="formLabelWidth">
          <el-input v-model="form.date" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="住址" :label-width="formLabelWidth">
          <el-input v-model="form.address" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="surefn">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 删除时候友好提示气泡框 -->

    <!-- <el-dialog
      title="您确定要删除吗"
      :visible.sync="delVisible"
      width="30%"
      :before-close="handleClose"
    >
      <span slot="footer" class="dialog-footer">
        <el-button @click="delVisible = false">取 消</el-button>
        <el-button type="primary" @click="delsure"
          >确 定</el-button
        >
      </span>
    </el-dialog> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      delVisible: false, // 用于控制删除的弹窗
      visible: false, // 用于控制气泡框的显示与隐藏
      delindex: 0, // 用于控制删除第几条
      editIndex: 0, // 用于保存编辑第几条得变量
      isedit: "新增", // 该变量用于判断走新增逻辑还是编辑逻辑
      tableData: [],
      dialogFormVisible: false, // 弹窗显示于隐层的布尔值
      form: {
        // 表单里的内容
        name: "",
        address: "",
        date: "",
      },

      formLabelWidth: "120px",
    };
  },
  mounted() {
    this.$axios.get("/list").then((res) => {
          this.tableData =  res.data.map(item=> ({ // 
          ...item,
          visible:false
        }))

    });
  },
  methods: {
    handleEdit(index, row) {
      this.isedit = "编辑";
      console.log(index, row);
      this.dialogFormVisible = true;
      this.form = JSON.parse(JSON.stringify(row));
      // 对象是引入数据类型，当用=赋值他们两个就指向了同一个地址
      this.editIndex = index;
    },
    handleDelete(index, row) {
      console.log(index, row);
      this.delVisible = true;
      this.delindex = index;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    addfn() {
      // 新增得函数
      // dialogFormVisible: false,
      this.dialogFormVisible = true; // 让弹窗显示
      this.isedit = "新增";
      this.form = {};
    },
    delsure() {
      // 删除时候确定执行得函数
      this.tableData.splice(this.delindex, 1);
      this.delVisible = false;
    },
    surefn() {
      // 弹窗点击确定执行得函数
      if (this.isedit == "新增") {
        this.tableData.push(this.form), (this.dialogFormVisible = false);
      } else {
        this.tableData.splice(this.editIndex, 1, this.form);
        this.dialogFormVisible = false;
      }
    },
    fn(index){
          this.tableData.splice(index, 1);
    }
  },
};
</script>

<style>
</style>
